<template>
	<view class="">
		<u-navbar title="实名认证" :status-bar="false" safe-area-inset-top @leftClick="leftClick" :placeholder="true"
			:autoBack="true">
		</u-navbar>
		<view class="tips">
			<view class="tips-text" v-html="content">
			</view>
			<view class="details" @click="$refs.popupCustomVue.init()">查看详情</view>
		</view>
		<view class="form">
			<u--form :model="form" :rules="rules" ref="uForm" label-width="auto">
				<u-form-item required label="认证类型" borderBottom>
					<!-- <u-radio-group v-model="form.type" style="justify-content: space-around;">
						<u-radio :name="1">公司</u-radio>
						<u-radio :name="2">个人</u-radio>
					</u-radio-group> -->
					<view style="width: 100%;text-align: right;">公司</view>
				</u-form-item>
				<!-- <view v-if="form.type == 1"> -->
				<u-form-item required label="证照信息" class="IDcardFrontItem" label-position="top" label-width="auto" borderBottom
					prop="businessLicenseUrl">
					<view class="licenseInfo">
						<u-upload :accept="'image'" multiple @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
							:fileList="fileList1" width="662rpx" height="274rpx" imageMode="widthFix">
							<view class="licenseInfoUpload">
								<image src="/static/realNameAuth/切图 21@2x.png" style="width: 64rpx;height: 66rpx;" mode="widthFix">
								</image>
								<view style="margin: 20rpx;font-size: 28rpx;">
									上传营业执照证件照
								</view>
							</view>
						</u-upload>
					</view>
					<view class="uploadTips">
						请上传彩色照片或扫描件，如使用复印件请加盖公章，支持jpg/jepg/png，最大10m
					</view>
				</u-form-item>
				<u-form-item required label="公司名称" borderBottom prop="name">
					<u-input border="none" inputAlign="right" maxlength="70" placeholder="请输入公司名称" v-model="form.name" />
				</u-form-item>
				<u-form-item required label="证件类型" borderBottom prop="documentType">
					<view>统一社会信用代码</view>
				</u-form-item>
				<u-form-item required label="证照号码" borderBottom prop="licenseNumber">
					<u-input border="none" inputAlign="right" v-model="form.licenseNumber" maxlength="18" placeholder="请输入证照号码" />
				</u-form-item>
				<u-form-item required label="是否是长期证照" borderBottom prop="isLongLicense">
					<u-radio-group v-model="form.isLongLicense" style="justify-content: space-around;"
						@change="()=> {form.licenseEndDate = null}">
						<u-radio :name="true">是</u-radio>
						<u-radio :name="false">否</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- </view> -->
				<u-form-item required label="证件开始日期" borderBottom prop="licenseStartDate">
					<view @click="showTime1 = true">
						<view class="time" v-if="!form.licenseStartDate">
							<view class="time_left">
								请选择证件开始日期
							</view>
							<view class="time_right">
								<image src="/static/to-right.png" style="width: 11rpx;height: 22rpx;" mode=""></image>
							</view>
						</view>
						<view v-else>
							{{form.licenseStartDate}}
						</view>
					</view>
				</u-form-item>
				<u-form-item required label="证件结束日期" borderBottom prop="licenseEndDate" v-if="!form.isLongLicense">
					<view @click="showTime2 = true">
						<view class="time" v-if="!form.licenseEndDate">
							<view class="time_left">
								请选择证件结束日期
							</view>
							<view class="time_right">
								<image src="/static/to-right.png" style="width: 11rpx;height: 22rpx;" mode=""></image>
							</view>
						</view>
						<view v-else>
							{{form.licenseEndDate}}
						</view>
					</view>
				</u-form-item>
				<!-- <view v-if="form.type == 2">
					<u-form-item required label="上传身份证人像面影像文件" label-position="top" label-width="auto" borderBottom>
						<view class="IDcardFront">
							<view>
								<image src="/static/realNameAuth/切图 22@2x.png" style="width: 280rpx;height: 150rpx;border: 1px dashed;"
									mode=""></image>
							</view>
							<view>
								<image src="/static/realNameAuth/切图 24@2x.png" style="width: 280rpx;height: 150rpx;" mode=""></image>
							</view>
						</view>
					</u-form-item>
					<u-form-item required label="上传身份证国徽面影像文件" class="IDcardFrontItem" label-position="top" label-width="auto"
						borderBottom>
						<view class="IDcardFront">
							<view>
								<image src="/static/realNameAuth/切图 23@2x.png" style="width: 280rpx;height: 150rpx;border: 1px dashed;"
									mode=""></image>
							</view>
							<view>
								<image src="/static/realNameAuth/切图 25@2x.png" style="width: 280rpx;height: 150rpx;" mode=""></image>
							</view>
						</view>
						<view class="uploadTips">
							请上传彩色照片或扫描件，如使用复印件请加盖公章，支持jpg/jepg/png，最大10m
						</view>
					</u-form-item>
					<u-form-item required label="姓名" borderBottom>
						<u-input border="none" inputAlign="right" placeholder="请输入姓名" v-model="form.name" />
					</u-form-item>
					<u-form-item required label="证件类型" borderBottom>
						<view>身份证</view>
					</u-form-item>
					<u-form-item required label="身份证号" borderBottom>
						<u-input border="none" inputAlign="right" v-model="form.name" placeholder="请输入身份证号" />
					</u-form-item>
				</view> -->
				<view class="reason" v-if="realAuthInfo && [3, 4].includes(realAuthInfo.status)">
					驳回原因：{{realAuthInfo.auditRemark}}
				</view>
				<view class="btn" @click="submit">
					{{(realAuthInfo && [3, 4].includes(realAuthInfo.status)) ? '重新提交' : '提交'}}
				</view>
			</u--form>
		</view>
		<u-datetime-picker :show="showTime1" :minDate="minDate" v-model="time1" :maxDate="maxDate" mode="date"
			@confirm="handleConfirm1" @cancel="handleClose1"></u-datetime-picker>
		<u-datetime-picker :show="showTime2" :minDate="minDate" v-model="time1" :maxDate="maxDate" mode="date"
			@confirm="handleConfirm2" @cancel="handleClose2"></u-datetime-picker>
		<popupCustomVue ref="popupCustomVue" title="实名认证说明" :content="content" />
	</view>
</template>

<script>
	import popupCustomVue from "../../components/popup_custom.vue";
	export default {
		components: {
			popupCustomVue
		},
		data() {
			return {
				form: {
					type: 1,
					name: "",
					documentType: 1,
					licenseNumber: "",
					isLongLicense: "",
					businessLicenseUrl: "",
					licenseStartDate: "",
					licenseEndDate: "",
				},
				content: "",
				showTime1: false,
				showTime2: false,
				time1: Number(new Date()),
				minDate: new Date(`1990-01-01`).getTime(),
				maxDate: new Date(`2100-12-31`).getTime(),
				fileList1: [],
				rules: {
					businessLicenseUrl: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					name: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					licenseNumber: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					isLongLicense: [{
						type: "boolean",
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					licenseStartDate: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					licenseEndDate: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
				},
				realAuthInfo: null,
			}
		},
		async onLoad(options) {
			this.content = await this.getAgreement("smrzsm");
			this.realAuthInfo = await this.realAuthDetail();
			if (this.realAuthInfo && [3, 4].includes(this.realAuthInfo.status)) {
				this.form = this.realAuthInfo
				this.fileList1 = [{
					url: this.form.businessLicenseUrl
				}]
			}
		},
		async onShow() {

		},
		methods: {
			async realAuthDetail() {
				let result = await this.api.realAuthDetail();
				return result.data.data;
			},
			submit() {
				let that = this;
				this.$refs.uForm.validate().then((valid) => {
					console.log(valid);
					if (valid) {
						let form = {
							type: 1,
							name: that.form.name,
							documentType: that.form.documentType,
							isLongLicense: that.form.isLongLicense,
							licenseNumber: that.form.licenseNumber,
							licenseStartDate: that.form.licenseStartDate,
							licenseEndDate: that.form.licenseEndDate,
							businessLicenseUrl: that.form.businessLicenseUrl
						}
						uni.showModal({
							title: '提示',
							content: '确定要提交吗？',
							success: function(res) {
								if (res.confirm) {
									that.api.addRealAuth(form).then(res => {
										uni.$u.toast("提交成功！人工待审核");
										setTimeout(() => {
											uni.navigateBack({
												delta: 3
											})
										}, 2500)
									})
								}
							}
						});

					}
				})
			},
			//格式化时间
			timestampToDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			//查询协议配置
			async getAgreement(code) {
				let result = await this.api.getAgreement(code);
				return result.data.data.content;
			},
			handleConfirm1(e) {
				this.form.licenseStartDate = this.timestampToDate(e.value);
				if (this.form.licenseEndDate) {
					this.form.licenseEndDate = "";
				}
				this.showTime1 = false;
			},
			handleClose1() {
				this.showTime1 = false;
			},
			handleConfirm2(e) {
				if (e.value <= new Date(this.form.licenseStartDate).getTime()) {
					uni.$u.toast("结束时间不能小于开始时间");
					return;
				}
				this.form.licenseEndDate = this.timestampToDate(e.value);
				this.showTime2 = false;
			},
			handleClose2() {
				if (new Date(this.form.licenseEndDate).getTime() <= new Date(this.form.licenseStartDate).getTime()) {
					this.form.licenseEndDate = "";
				}
				this.showTime2 = false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.form.businessLicenseUrl = null;
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				let regex = /\.([a-zA-Z0-9]+)$/;
				let name = event.file[0].name
				const match = name.match(regex);
				console.log(match);
				if (!['jpg', 'jpeg', 'png'].includes(match[1])) {
					this.$u.toast(`请上传格式为${['jpg','jpeg','png'].join('/')}的图片`);
					return;
				}
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFile(lists[i].url);
					console.log(result);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
				this.form.businessLicenseUrl = this.fileList1[0].url;
				this.api.recognizeBusinessLicense(this.form.businessLicenseUrl).then(res => {
					let data = JSON.parse(res.data.data)
					if (data.words_result) {
						let arr = [{
								label: '单位名称',
								key: 'name'
							},
							{
								label: '社会信用代码',
								key: 'licenseNumber'
							},
						]
						for (let i = 0; i < arr.length; i++) {
							this.form[arr[i].key] = data.words_result[arr[i].label].words
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		// background-color: #F6F6F6;
	}

	.tips {
		background: #F8DD02;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.tips-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
		}

		.details {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #0F93FF;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-decoration-line: underline;
			text-transform: none;
			text-align: right;
			width: 15%;
		}
	}

	.form {
		padding: 30rpx;

		::v-deep .u-form-item {
			padding-top: 15rpx;
		}

		::v-deep .u-form-item__body {
			padding-bottom: 35rpx;
		}

		::v-deep .u-form-item__body__right__content__slot {
			justify-content: flex-end;
		}
	}

	.IDcardFront {
		width: 100%;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.IDcardFrontItem {
		::v-deep .u-form-item__body__right__content__slot {
			flex-direction: column;
		}
	}

	.licenseInfo {
		padding: 20rpx;

	}

	.licenseInfoUpload {
		width: 662rpx;
		height: 274rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1rpx solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.uploadTips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 10rpx 20rpx;
	}

	.time {
		display: flex;
		align-items: center;

		.time_left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 28rpx;
			text-align: right;
			font-style: normal;
			text-transform: none;
		}

		.time_right {
			margin-left: 10rpx;
		}
	}

	.reason {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF3030;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: 30rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #7F83F7;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #fff;
		line-height: 44rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		height: 84rpx;
		margin: 30rpx 0rpx;
	}
</style>